<template>
  <div class="page">
    <div class="main">
      <!-- <div class="subnav">
        <div class="searchLeft">
          <el-button type="primary" @click="getBack()">返回</el-button>
          <el-radio-group v-model="radio1" @change="selectData()">
            <el-radio-button label="季度"></el-radio-button>
            <el-radio-button label="月度"></el-radio-button>
          </el-radio-group>
        </div>
        <div class="searchRight">
        </div>
      </div> -->

      <el-card class="box-card">
        <div slot="header" class="clearfix">
          <span>进度列表</span>
           <el-button type="primary"   class="place" @click="getBack()">返回</el-button>
          <el-radio-group v-model="radio1" style="margin-right:20px;"  class="place" @change="selectData()">
            <el-radio-button label="季度"></el-radio-button>
            <el-radio-button label="月度"></el-radio-button>
          </el-radio-group>
        </div>  
             <div class="list">
        <el-scrollbar class="page-component__scroll" style="height:100%">
          <div style="height:700px;">
            <el-table
              border
              ref="multipleTable"
              :data="tableData"
              tooltip-effect="dark"
              style="width: 100%"
              @selection-change="handleSelectionChange"
            >
              <el-table-column prop="year" label="年度"> </el-table-column>

              <el-table-column prop="time" :label="radio1">
                <!-- <template>{{ time }}</template> -->
              </el-table-column>
              <el-table-column prop="score" label="分数"> </el-table-column>

              <el-table-column label="操作">
                <template slot-scope="scope">
                  <el-button
                    type="primary"
                    size="mini"
                    @click="upAmend(scope.row)"
                    >修改</el-button
                  >
                  <el-button
                    type="danger"
                    size="mini"
                    @click="deleteRow(scope.row)"
                    >删除</el-button
                  >
                </template>
              </el-table-column>
            </el-table>
          </div>
        </el-scrollbar>
      </div>
      </el-card>
 
      <!-- <div class="laypage">
        <el-pagination
          background
          layout="prev, pager, next"
          @current-change="dataTotal"
          :page-size="pageSize"
          :current-page="pageNum"
          :pager-count="9"
          :total="total"
        ></el-pagination>
      </div> -->
    </div>

    <!-- 弹出备注输入框 -->
    <el-dialog title="备注" :visible.sync="dialogRemark" width="30%" center>
      <el-input
        type="textarea"
        :rows="8"
        placeholder="请输入内容"
        v-model="currObj.remarks"
      >
      </el-input>

      <span slot="footer" class="dialog-footer">
        <el-button @click="dialogRemark = false">取 消</el-button>
        <el-button type="primary" @click="remarkOk()">确 定</el-button>
      </span>
    </el-dialog>

    <!-- 打分弹框 -->
    <el-dialog title="打分" :visible.sync="dialogVisible" width="30%" center>
      <el-form ref="form" label-width="80px">
        <el-form-item
          :label="item.China"
          v-for="(item, index) in dialogList"
          :key="index"
        >
          <el-input
            v-model="item.score"
            size="medium"
            :placeholder="setRemarks(item.China)"
          ></el-input>
        </el-form-item>
      </el-form>
      <b style="color:red" v-show="isShow">警告:请输入1~100的数字</b>
      <span slot="footer" class="dialog-footer">
        <el-button @click="dialogVisible = false">取 消</el-button>
        <el-button type="primary" @click="dialogOk()">确 定</el-button>
      </span>
    </el-dialog>
  </div>
</template>
<script>
export default {
  data() {
    return {
      pageNum: 1,
      pageSize: 10,
      dialogVisible: false,
      dialogRemark: false,
      year: "",
      options: [],
      dialogList: [],
      value: "",
      input: "",
      tableData: [],
      total: 0,
      multipleSelection: [],
      currentPage1: 5,
      currentPage2: 5,
      currentPage3: 5,
      currentPage4: 4,
      textarea: "",
      ID: "",
      isShow: false,
      currObj: {},
      radio1: "季度"
    };
  },
  mounted() {
    this.getListByPage();
  },
  methods: {
    // 返回
    getBack() {
      this.$router.push("/unitScore");
    },
    selectData() {
      this.getListByPage();
      console.log(this.radio1);
    },
    setRemark(val) {
      this.currObj = val;
      this.dialogRemark = true;
    },
    // 删除
    deleteRow(val) {
      this.$confirm("此操作将永久删除该文件, 是否继续?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning"
      })
        .then(() => {
          this.$axios
            .post(
              `/deptScore/remove`,
              {
                id: val.id
              },
              2
            )
            .then(res => {
              if (res.code == 200) {
                console.log(res);
                this.$message({
                  message: "数据更新成功",
                  type: "success"
                });

                this.getListByPage();
              }
            })
            .catch(err => {
              console.log(err);
            });
        })
        .catch(() => {
          this.$message({
            type: "info",
            message: "已取消删除"
          });
        });
    },
    // 修改
    upAmend(val) {
      console.log(val);
      this.$prompt("请输入新的分数", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消"
      })
        .then(({ value }) => {
          this.$axios
            .post(
              `/deptScore/update`,
              {
                id: val.id,
                score: value
              },
              2
            )
            .then(res => {
              if (res.code == 200) {
                this.$message({
                  message: "数据更新成功",
                  type: "success"
                });

                this.getListByPage();
              }
            })
            .catch(err => {
              console.log(err);
            });
        })
        .catch(() => {
          this.$message({
            type: "info",
            message: "取消输入"
          });
        });
    },
    remarkOk() {
      this.dialogRemark = false;
      this.$axios
        .post(`/deptTask/update`, this.currObj)
        .then(res => {
          if (res.code == 200) {
            this.$message({
              message: "数据更新成功",
              type: "success"
            });
            this.dialogRemark = false;
            this.getListByPage();
          }
        })
        .catch(err => {
          console.log(err);
        });
    },
    // 弹框的确定按钮
    dialogOk() {
      this.isShow = false;
      console.log(this.dialogList);
      this.dialogList.forEach(item => {
        for (let k in item) {
          if (k == "score") {
            if (item[k] == "") {
              this.isShow = true;
            }
            if (!/(^[1-9]\d*$)/.test(item[k])) {
              this.isShow = true;
            }
          }
        }
      });
      if (this.isShow) {
        return;
      }
      this.$axios
        .post(`/deptTask/updateScore`, this.dialogList)
        .then(res => {
          if (res.code == 200) {
            this.$message({
              message: "数据更新成功",
              type: "success"
            });
            this.dialogVisible = false;
            this.getListByPage();
          }
        })
        .catch(err => {
          console.log(err);
        });
    },
    setRemarks(val) {
      return `请输入${val}完成率，值为0~100`;
    },
    // 列表函数返回值
    returnGgrade(val, index) {
      let text = "";
      for (let i = 0; i < val.length; i++) {
        if (val[i].quarter == index) {
          return (text = `${val[i].score}`);
        } else {
          return 0;
        }
      }
    },
    dataTotal(val) {
      this.pageNum = val;
    },
    // 表格数组
    handleSelectionChange(val) {
      this.multipleSelection = val;
    },
    // 列表查看按钮
    routerPath(val) {
      this.dialogList = val;
      this.dialogList.forEach(item => {
        switch (item.quarter) {
          case 1:
            item.China = "第一季度";
            break;
          case 2:
            item.China = "第二季度";
            break;
            item.China = "第三季度";
            代码块;
            break;
          default:
            item.China = "第四季度";
        }
      });

      this.dialogVisible = true;
    },
    // 编写备注
    dataRemark() {
      this.dialogVisible = true;
    },
    // 获取数据列表
    getListByPage() {
      this.ID = this.$route.query.id;
      let _time = 1;
      if (this.radio1 == "月度") {
        _time = 0;
      }
      let _obj = {
        departmentId: this.$route.query.id,
        type: _time
      };
      this.$axios
        .post(`/deptScore/getList`, _obj, 2)
        .then(res => {
          if (res.code == 200) {
            this.tableData = res.data;
            // this.total = res.data.total;
          }
        })
        .catch(err => {
          console.log(err);
        });
    },
    // 当前年份更改
    selectTear() {
      this.pageNum = 1;
      this.getListByPage();
    },
    // 获取当前年份
    doHandleYear() {
      var myDate = new Date();
      var tYear = myDate.getFullYear();
      return tYear;
    }
  }
};
</script>
<style scoped>
.page {
  width: 100%;
  height: 100%;
  overflow: hidden;
}

.main {
  width: 100%;
  height: 100%;
}
.subnav {
  float: left;
  width: 100%;
  height: 60px;
  line-height: 60px;
  /* padding: 0 20%; */
}
.searchLeft {
  float: left;
  width: 400px;
  /* height: 40px; */
}
.searchLeft > button {
  width: 100px;
  height: 40px;
  background: #409eff;
  color: #fff;
  border: 0px;
  font-size: 16px;
  text-align: center;
  border-top-right-radius: 4px;
  border-bottom-right-radius: 4px;
  position: relative;
  left: -8px;
  top: 1px;
}
.searchRight {
  float: left;
  width: auto;
}
.searchRight > span {
  display: inline-block;
  width: 80px;
  height: auto;
  font-size: 14px;
  text-align: center;
  margin-left: 20px;
}
.el-scrollbar__wrap {
  overflow-x: hidden;
}
.page-component__scroll {
  height: 100%;
}
.list {
  width: 100%;
  height: 100%;
  padding-bottom: 60px;
}
.laypage {
  width: 100%;
  height: 60px;
  position: relative;
  top: -60px;
  text-align: center;
}
</style>
<style>
.el-scrollbar__wrap {
  overflow: visible;
  overflow-y: scroll;
}
</style>
